/**
 * @author of2470
 *@date 2017/4/1
 *@description
 */

import * as React from "react";
import { Relax } from "iflux2";
import { Tabs, Spin } from "antd";
const TabPane = Tabs.TabPane;
import PageManageContent from "./page-manage-content";
import { List } from "immutable";

declare let window: any;

const PLATFORM_INFO = {
  pc: "PC端",
  weixin: "微信端",
  app: "APP端"
};

@Relax
export default class PageManageMain extends React.Component<any, any> {
  constructor(props) {
    super(props);
    let tip = "加载中";
    if (window.isUpdating) {
      tip = "又有新惊喜啦！建站升级中，请稍等一会儿吧～";
    }
    this.state = {
      loading: true,
      platform: "pc",
      tip
    };
  }

  static defaultProps = {
    platformBtns: List(),
    getPageList: () => {}
  };

  componentDidMount() {
    let target = this;
    if (window.isUpdating) {
      let dom: any = document.getElementsByClassName("ant-spin-blur");
      if (dom.length > 0) {
        dom[0].style.opacity = 0;
      }
    } else {
      this.props
        .getPageList({ platform: "pc", pageNo: 0, pageSize: 10 })
        .then(() => {
          target.setState({ loading: false });
        })
        .catch(err => {
          console.log(err);
          target.setState({ loading: false });
        });
    }
  }

  render() {
    let tabPanes = this.props.platformBtns.map(item => {
      return (
        <TabPane tab={PLATFORM_INFO[item.get("type")]} key={item.get("type")}>
          <PageManageContent
            platform={this.state.platform}
            loading={this.state.loading}
          />
        </TabPane>
      );
    });

    return (
      <Spin spinning={this.state.loading} tip={this.state.tip}>
        <Tabs defaultActiveKey="pc" onChange={this._changeTab}>
          {tabPanes}
        </Tabs>
      </Spin>
    );
  }

  _changeTab = key => {
    this.setState({ platform: key, loading: true });
    this.props
      .getPageList({
        platform: key,
        pageNo: 0,
        pageSize: 10
      })
      .then(() => {
        this.setState({ loading: false });
      })
      .catch(() => {
        this.setState({ loading: false });
      });
  };
}
